<template>
  <el-dialog
      v-loading="dialog.loading"
      class="designFormDialog"
      v-model="dialog.visible"
      :fullscreen="true"
      append-to-body
      title="设计表格">
    <start-activit-designer
        v-if="dialog.visible"
        ref="startActivitDesigner">
      <template #control-bar-right>
        <el-button @click="closeDialog">关闭</el-button>
        <el-button @click="saveModelEvent">保存</el-button>
      </template>
    </start-activit-designer>

    <edit-model-dialog ref="editModelDialog" @submit="handlerSaveEvent"></edit-model-dialog>
  </el-dialog>
</template>

<script>

import actModelApi from "@/api/start/activiti/actModelApi";
import StartActivitDesigner from "components/start-activiti/startActivitDesigner.vue";
import {ElLoading} from "element-plus";
import EditModelDialog from "@/views/start/activiti/model/editModelDialog.vue";

export default {
  name: "actModelDesign",
  components: {EditModelDialog, StartActivitDesigner},

  data() {
    return {
      dialog: {
        title: '',
        loading: true,
        visible: false,
      },
      modelOption: null,
      processModel: {},
    }
  },
  methods: {
    show(id, title) {
      console.log("模型id",id)
      this.processModel.id = id;
      this.dialog.title = title;
      this.dialog.visible = true;
      this.$nextTick(() => this.loadModel())
    },
    loadModel() {

      if (!this.processModel.id) {
        return
      }

      const loading = ElLoading.service({fullscreen: true, text: "加载中请稍后"})
      actModelApi.getById(this.processModel.id).then(res => {
        let data = res.data.data;
        if (!data) {
          this.$message("未知流程模型");
          return
        }
        this.processModel = data;
        this.$nextTick(() => {
          this.$refs.startActivitDesigner.loadModelConfig(data);
          loading.close();
        })
        // this.dialog.loading = false
      }).finally(() => {
        loading.close();
      })
    },
    handlerSaveEvent(formModel, done) {
      const loading = ElLoading.service({fullscreen: true, text: "保存中请稍后"})
      this.dialog.loading = true
      console.log("formModel",formModel)
      actModelApi.saveModel(formModel).then(res => {
        this.$message.success("保存成功")
        this.$emit("submit")
        this.closeDialog()
      }).finally(() => {
        loading.close()
        done()

      })
    },
    saveModelEvent() {
      this.$refs.startActivitDesigner.saveXML().then((res) => {
        if (res.err) {
          this.$message.error("保存xml错误\n" + res.err.message)
          return
        }
        let xml = res.xml
        this.processModel.configMap = this.$refs.startActivitDesigner.getModelConfigMap()
        this.processModel.bpmnXml = xml;
        this.$refs.editModelDialog.show(this.processModel)

      })

    },

    closeDialog() {
      this.processModel = {};
      this.dialog.visible = false;
    }
  }
}
</script>

<style scoped>

</style>
